<script setup lang="ts">
  import { ref,reactive,toRef,toRefs } from 'vue';

  let user = reactive({name:'张三',age:18,gender:'男'})  // ref定义对象类型

  let {name,age} = toRefs(user);  // 整体转换,toRefs(user)返回一个对象
  let gender = toRef(user,'gender')

  function add(){
    age.value++;
    // console.log(user);
  }

  function change(){
    if(gender.value=='男'){
        gender.value='女'
    }else{
        gender.value='男'
    }
  }

  function changeUser(){
    name.value='李四';
    age.value=20;
    gender.value='男'
  }
</script>
<template>
    <div class="home">
        <h2>姓名:{{user.name}}</h2>
        <h2>年龄:{{user.age}}</h2>
        <h2>性别:{{user.gender}}</h2>
        <button @click="add">年龄+1</button>
        <button @click="change">改变性别</button>
        <button @click="changeUser">换个人</button>
    </div>
</template>
<style scoped>
  h2{
    color: cadetblue;
  }
</style>